<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="margin-top: 14px;">
      <h5 style="text-align: left; margin-left: 14px;"> 符合条件的生产总数：{{this.tableData.length}} 例</h5>
      <h5 style="text-align: left; margin-left: 14px;">
        <span style="color: red;">其中等待审核的生产计划总数:{{this.shNum}}例&nbsp;&nbsp;</span>
        <!-- 其中正在执行的生产派工单总数：7例,-->
        <span style="color: blue;">其中未通过的生产计划总数:{{this.zhixNum}}例&nbsp;&nbsp;</span>
        <span style="color: green;">其中通过的生产计划总数:{{this.wcNum}}例&nbsp;&nbsp;</span>
      </h5>
    </div>
    <div style="background-color: #E9EEF3; height: 450px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 400px;" size="mini">
          <el-table-column prop="newpro_id" label="生产计划编号" width="120">
          </el-table-column>
          <el-table-column prop="registrant" label="登记人" width="100">
          </el-table-column>
          <el-table-column prop="regtime" label="登记时间" width="210">
          </el-table-column>
          <el-table-column prop="supPlytime" label="供货时间" width="210">
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="140">
          </el-table-column>
          <el-table-column prop="checks" label="计划单状态" width="130">
          </el-table-column>
          <el-table-column label="查看" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="zhisjd(scope.row)" round="">查看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div><!-- scpgdsh -->
    <el-drawer title="新发生产派工单" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div style="text-align: center; margin-left: 930px; margin-top: 0px;">
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 45px ; height: 35px;" @click="scjfds()">返回</el-button>
        </span>
      </div>
      <div class="body_main">
        <div style="padding: 13px;">
          <!--
          newPlan:{
             newpro_id:0, //计划单id
             supPlytime;'',//供货时间
             registrant:'', //登记人
             regtime:'',//登记时间
             remark:'',//备注
             checks:'',//审核
             auditor:'',//审核人
             auditorTime:时间
          }
          -->
          <el-form :model="newPlan">
            <el-row>
              <el-col :span="14" style="text-align: left;">
                <h5>计划单编号:{{this.newPlan.newpro_id}}</h5>

              </el-col>
              <el-col :span="10" style="text-align: right;">
                <h5>登记人:{{this.newPlan.registrant}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <h5>生产单状态:{{this.newPlan.checks}}</h5>
              </el-col>
            </el-row>
            <el-table border :data="tableData2" tooltip-effect="dark"
              style="width: 100%;margin-top: 26px;overflow: scroll;height: 165px;" size="mini">
              <el-table-column prop="newpro_id" label="设计单编号" width="140">
              </el-table-column>
              <el-table-column prop="pName" label="产品名称" width="130">
              </el-table-column>
              <el-table-column prop="proSige_id" label="产品编号" width="140">
              </el-table-column>
              <el-table-column prop="num" label="设计数量" width="140">
              </el-table-column>
              <el-table-column prop="price" label="商品单价" width="140">
              </el-table-column>
              <el-table-column prop="sumPrice" label="设计总价(物料+工序)" width="140">
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 25px">
              <el-col :span="16">
                <h5 style="text-align: left;">登记人:{{this.newPlan.registrant}}</h5>
              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">登记时间 : {{this.newPlan.regtime}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col :span="16">
                <h5 style="text-align: left;">审核人:{{this.newPlan.auditor}}
                </h5>
              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">审核时间 : {{this.newPlan.auditorTime}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col :span="8">
                <h5 style="text-align: left;">备注 :{{this.newPlan.remark}}</h5>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

    </el-drawer>

  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        shNum: 0,
        zhixNum: 0,
        wcNum: 0,
        processesName: '',
        o: 0,
        pageNum: 1,
        pageSize: 7,
        total: 0,
        tableData: [],
        tableData2: [],
        dialogVisible3: false,
        drawer: false,
        newPlan:{
           newpro_id:0, //计划单id
           supPlytime:'',//供货时间
           registrant:'', //登记人
           regtime:'',//登记时间
           remark:'',//备注
           checks:'',//审核
           auditor:'',//审核人
           auditorTime:''
        },
        formLabelWidth: '120px',
        form: {
          num: 0,
          sjnum: 0
        },
      }
    },
    methods: {
      scjfds() {
        this.drawer = false;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/newPlanListfindByPager', data).then(res => {
          console.log(res.data);
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
          var wcNum = 0;
          var shNum = 0;
          var zhixNum = 0;
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].checks == "已审核") {
              wcNum++;
            }
            //pGstatus == '未派工'
            if (this.tableData[i].checks == "未审核") {
              shNum++;
            }

            if (this.tableData[i].checks == '未通过') {
              zhixNum++
            }
          }
          this.zhixNum = zhixNum;
          this.shNum = shNum;
          this.wcNum = wcNum;

        }).catch(err => {
          console.log(err);
        })
      },
      zhisjd(data) {


        /*  newPlan:{
           newpro_id:0, //计划单id
           supPlytime;'',//供货时间
           registrant:'', //登记人
           regtime:'',//登记时间
           remark:'',//备注
           checks:'',//审核
           auditor:'',//审核人
           auditorTime:时间
        },*/
        this.newPlan.newpro_id=data.newpro_id;
        this.newPlan.supPlytime=data.supPlytime;
        this.newPlan.registrant=data.registrant;
        this.newPlan.regtime=data.regtime;
        this.newPlan.remark=data.remark;
        this.newPlan.checks=data.checks;
        this.newPlan.auditor=data.auditor;
        this.newPlan.auditorTime=data.auditorTime;
        var datas = new URLSearchParams();
        this.$http.post('production/productionproduct/selNewPlanDetail?newpro_id=' + data.newpro_id).then(res => {
          if (res.length != 0) {
            this.tableData2 = res.data;
            this.drawer = true;
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }

  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  #father {
    height: 480px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;

  }

  .body_main {
    margin: 0px auto;
    width: 880px;
    height: 428px;
    background-color: white;
    margin-top: 15px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
  }

  .span_01 {
    font-size: 14px;
  }

  #sons {
    /* margin: 9px auto; */

    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 15px;
    /* border: 3px solid whitesmoke; */
    /* border-radius: 16px; */

  }

  #son {

    padding: 15px;
    width: 100%;
    background-color: white;

  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }
</style>
